<template>

  <page-card title="消息中心">
    <div>
      <a-form layout="inline">
        <a-row type="flex"
               style="margin-bottom:20px"
               justify="space-between">
          <a-col>
            <a-button action
                      type="delete"
                      :disabled="selectedTableRow.length == 0"
                      @click="delMsg">删除</a-button>
          </a-col>
          <a-col>
            <a-input-search v-model="queryParam.keyword"
                            placeholder="消息关键字"
                            allow-clear
                            @search="search" />
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-table :row-selection="rowSelection"
               :pagination="pagination"
               @change="handleTableChange"
               :rowKey="(record) => record.insideMsgId"
               :data-source="dataSource"
               :columns="columns">
        <!-- <template slot="resource"
                  slot-scope="text,record">
          <a-tooltip>
            <template slot="appName">
              <p>{{ record.sourceAppName }}</p>
            </template>
            <img v-if="record.appLogo!=''"
                 :src="record.appLogo"
                 class="app-logo" />
          </a-tooltip>
        </template> -->
        <template slot="details"
                  slot-scope="text,record">
          <div style="display: flex;">
            <div style="width: 100%;">
              <!-- <div :style="record.readStatus == '2'?readState:'width: 100%;'"> -->

              <span style="display:inline-block; vertical-align: middle; padding: 0px 6px;width: 100%;">
                <div v-if="record.contentType==='action_card'"
                     v-text="record.title"
                     class="title">
                </div>
                <a v-else-if="record.contentType==='link'"
                   class="title"
                   target="_blank"
                   :href="JSON.parse(record.msg).link.messageUrl">
                  <span class="msg-span">{{ record.sourceName }}</span>
                  <span>{{ record.title }}</span>
                </a>
                <div v-if="record.contentType==='text'"
                     class="title">
                  <span class="msg-span">{{ record.sourceName }}</span>
                  <span>{{ record.details }}</span>
                </div>

                <div v-else
                     v-text="record.details"
                     :style="{color: fontColor.SECONDARY,marginTop: '5px'}" />

                <div v-if="record.contentType==='action_card'">
                  <div v-if="JSON.parse(record.msg).action_card.btn_json_list && JSON.parse(record.msg).action_card.btn_json_list.length > 0">
                    <a-button action
                              type="primary"
                              v-for="(item,index) in JSON.parse(record.msg).action_card.btn_json_list"
                              :key="index"
                              class="action-catd-btn"
                              @click="actionJump(item.action_pc_url)">{{ item.title }}</a-button>
                  </div>
                  <div v-else>
                    <a-button action
                              type="primary"
                              class="action-catd-btn"
                              @click="actionJump(JSON.parse(record.msg).action_card.single_pc_url, record)">---查看详情</a-button>
                  </div>
                </div>
                <span :style="{color: fontColor.INFO,display:'block'}">{{ record.time }}</span>
              </span>
            </div>
          </div>
        </template>
      </a-table>
    </div>
    <!-- </div> -->
  </page-card>
</template>

<script>
import dayjs from 'dayjs'
import { PAGINATION, FONT_COLOR, DATETIME_FORMAT } from '../../constants'
import storage from '@zh/common-utils/utils/storage'
import { getMessagePage, updateReadStatusList, deleteMessages } from '../../api/message/index'

export default {
  data () {
    return {
      pagination: PAGINATION,
      fontColor: FONT_COLOR,
      class1: 'margin: 0px 20px;',
      class2: 'margin: 10px 0px;',
      readState: 'font-weight: bold;width: 100%;',
      linkPointer: 'cursor: pointer;font-size: var(--font-size-18);',
      unread: [],
      selectedTableRow: [],
      selectedRows: [],
      dataSource: [],
      queryParam: {
        keyword: '',
        isRead: '1'
      },
      columns: [
        // {
        //   title: '来源',
        //   width: 50,
        //   dataIndex: 'appLogo',
        //   align: 'center',
        //   scopedSlots: { customRender: 'resource' }
        // },
        {
          title: '消息',
          dataIndex: 'details',
          align: 'left',
          scopedSlots: { customRender: 'details' }
        }
      ]
    }
  },
  computed: {
    rowSelection () {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          const me = this
          me.unread = []
          if (selectedRows.length > 0) {
            selectedRows.forEach((item) => {
              if (item.readStatus == '2') {
                me.unread.push(item.insideMsgId)
              }
            })
          }
          me.selectedTableRow = selectedRowKeys
          me.selectedRows = selectedRows
          if (this.selectedTableRow.length == this.dataSource.length) {
            me.checkbox = true
          } else {
            me.checkbox = false
          }
        }
      }
    }
  },
  mounted () {
    this.loadTable({
      currPage: this.pagination.current,
      pageSize: this.pagination.pageSize
    })
  },
  methods: {
    onSelectChange (selectedRows) {
      this.unread = []
      if (selectedRows.length > 0) {
        selectedRows.forEach((item) => {
          if (item.readStatus == '2') {
            this.unread.push(item.insideMsgId)
          }
        })
      }

      // this.selectedTableRow = selectedRowKeys
      this.selectedRows = selectedRows
      if (this.selectedTableRow.length == this.dataSource.length) {
        this.checkbox = true
      } else {
        this.checkbox = false
      }
    },
    // onChange () {
    //   this.selectedTableRow = []
    //   if (this.checkbox) {
    //     let count = this.dataSource.length
    //     for (var i = 0; i < count; i++) {
    //       this.selectedTableRow.push(this.dataSource[i].insideMsgId)
    //     }
    //   }
    // },
    search () {
      this.loadTable({
        currPage: 1,
        pageSize: this.pagination.pageSize
      })
    },
    handleTableChange (pagination) {
      this.pagination = pagination
      this.loadTable({
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize
      })
    },
    loadTable (params = {}) {
      getMessagePage({ ...params, ...this.queryParam }).then((response) => {
        this.dataSource = response.list
        this.pagination.current = response.currPage
        this.pagination.total = response.totalCount
      })
    },
    readMsg () {
      updateReadStatusList(this.selectedTableRow).then((response) => {
        this.unread = []
        this.message.info('操作成功')
        this.loadTable({
          currPage: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
      })
    },
    delMsg () {
      let _this = this
      _this.confirm({
        title: '提示',
        content: '确定删除',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          deleteMessages(_this.selectedTableRow).then((response) => {
            _this.loadTable({
              currPage: _this.pagination.current,
              pageSize: _this.pagination.pageSize
            })
          })
          _this.message.info('删除成功')
        },
        onCancel () { }
      })
    },
    clickJump (record) {
      let msg = JSON.parse(record.msg)
      let url = ''
      if (msg.msgtype === 'link') {
        url = msg.link.messageUrl
        window.open(url, '_blank')
      }
    },
    jumpMsgInfo (record) {
      this.$router.push({
        path: '/message/message-info',
        query: {
          msgId: record.msgId,
          insideMsgId: record.insideMsgId
        }
      })
    },
    actionJump (url, record) {
      window.open(record.ssoLoginUrl + '?targetUrl=' + encodeURIComponent(url) + '&token=' + encodeURIComponent(storage.getToken()), '_blank')
    },
    formatDateTime (datetime) {
      return dayjs(datetime).format(DATETIME_FORMAT.DATETIME)
    }
  }
}
</script>

<style scoped>
.text {
  white-space: nowrap; /*强制单行显示*/
  text-overflow: ellipsis; /*超出部分省略号表示*/
  overflow: hidden; /*超出部分隐藏*/
  width: 700px; /*设置显示的最大宽度*/
  display: inline-block;
  vertical-align: top;
  font-weight: bolder;
}
.tip {
  display: inline-block;
  background: #f00;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.ant-spin-nested-loading {
  border-top: 1px solid rgb(232, 232, 232);
  border-left: 1px solid rgb(232, 232, 232);
  border-right: 1px solid rgb(232, 232, 232);
  position: relative;
}

.read-state {
  font-weight: bold;
}
.action-catd-btn {
  margin: 10px 20px 10px 0px;
}
.link-title:hover {
  color: blue;
}
.title {
  font-size: 15px;
  text-decoration: none;
}
.app-logo {
  width: 50px;
  height: 50px;
  border: 0;
}
.msg-span {
  border: 0.005208rem solid;
  border-radius: 0.015625rem;
  margin-right: 5px;
  font-size: 12px;
  padding: 0 0.026042rem;
}
</style>
